<script setup>
import { ref,onMounted } from "vue";
import ModalComponent from "@/views/accountSettings/components/CustomModal.vue";
import {userUserStore} from "@/stores/index.js";

// 用户信息
const info = ref({
  phone: "12345678901",
  email: "user@example.com",
});

onMounted(() => {
  info.value.phone = userUserStore().userInfo.phone
  info.value.email = userUserStore().userInfo.email
})

// 弹窗相关状态
const isModalVisible = ref(false);
const modalTitle = ref("");
const modalFields = ref([]);

// 更新 fields 数据
const updateFields = (updatedFields) => {
  modalFields.value = updatedFields;
  console.log(modalFields.value)
};

// 根据点击的菜单项配置弹窗内容
const handleClick = (e) => {
  switch (e.key) {
    case "phone":
      modalTitle.value = "换绑手机号";
      modalFields.value = [
        { label: "新手机号", placeholder: "请输入新手机号", type: "phone", value: "",key: "phoneNum" },
        { label: "短信验证码", placeholder: "请输入验证码", type: "text", value: "",key: 'code' },
      ];
      break;
    case "email":
      modalTitle.value = "换绑邮箱";
      modalFields.value = [
        { label: "新邮箱", placeholder: "请输入新邮箱", type: "email", value: "" ,key: 'email'},
        { label: "邮箱验证码", placeholder: "请输入验证码", type: "text", value: "" ,key: 'code'},
      ];
      break;
    case "password":
      modalTitle.value = "更换密码";
      modalFields.value = [
        { label: "旧密码", placeholder: "请输入旧密码", type: "password", value: "", key: 'oldPassword'},
        { label: "新密码", placeholder: "请输入新密码", type: "password", value: "",key: 'newPassword' },
        { label: "再次输入新密码", placeholder: "请再次输入新密码", type: "password", value: "",key: 'reNewPassword' },
      ];
      break;
  }
  isModalVisible.value = true; // 打开弹窗
};

</script>

<template>
  <!-- 菜单 -->
  <a-menu mode="inline" class="menu-content" @click="handleClick">
    <a-menu-item key="phone" class="menu-item-content">
      <div><strong>手机号：</strong>{{ info.phone }}</div>
    </a-menu-item>
    <a-menu-item key="email" class="menu-item-content">
      <div><strong>邮箱：</strong>{{ info.email }}</div>
    </a-menu-item>
    <a-menu-item key="password" class="menu-item-content">
      <div><strong>密码：</strong>为了您的账号安全，建议您定期修改密码</div>
    </a-menu-item>
  </a-menu>

  <!-- 自定义弹窗 -->
  <ModalComponent
    v-model:visible="isModalVisible"
    v-model:fields="modalFields"
    :title="modalTitle"
  />
</template>

<style scoped>
.menu-content {
  width: 100%;
  background: white;
  border-radius: 8px;
}

.menu-item-content {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 8px;
}
</style>
